<template>
    <div class="carcontrol">
        <transition name="move">
            <div v-show="this.food.count" @click.stop.prevent="reduce" class="reduce">
                <i class="inner icon-remove_circle_outline"></i>
            </div>
        </transition>
        <div class="select-count" v-show="this.food.count">{{this.food.count}}</div>
        <div class="add" @click.stop.prevent="add">
            <i class="icon-add_circle"></i>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
export default {
    props: {
        food: {
            type: Object
        }
    },
    data () {
        return {
            count: 0
        }
    },
    methods: {
        add(event) {
            if (!this.food.count) {
                Vue.set(this.food, 'count', 1)
            } else {
                this.food.count++
            }
            this.$emit('add', event.target)
        },
        reduce(event) {
            if (!this.food.count) {
                Vue.set(this.food, 'count', 1)
            } else {
                this.food.count--
            }
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.carcontrol
    position: absolute
    right: 0
    bottom: 0
    display: flex
    font-size: 24px
    color: rgb(0, 160, 220)
    line-height: 24px
    transform: translate3d(0, 0, 0)
    opacity: 1
    .reduce
        .inner
            display: inline-block
            transition: all .4s linear
            transform: rotate(0deg)
        &.move-enter-active, &.move-leave-active
            transition: all .4s linear
        &.move-enter, &.move-leave-active
            transform: translate3d(22px, 0, 0)
            opacity: 0
            .inner
                transform: rotate(180deg)
    .select-count
        width: 24px
        color: rgb(143, 153, 159)
        line-height: 24px
        font-size: 16px
        text-align: center
</style>
